<style lang="less">
@import "./hotelManage.less";
</style>
<template>
  <div class="search" style="background-color:white">
    <template>
      <Form ref="hotelRoomDetailForm" :model="hotelRoomDetailForm" :label-width="110" :rules="hotelRoomDetailFormValidate">
            <Tabs type="card">
              <TabPane label="房型基础信息" style="border-left: 1px solid #dddee1;">
                <Form-item label="当前酒店:" style="padding-top:16px;color:#2d8cf0;">{{currentHotel.title}}
                </Form-item>
                <Form-item label="房型名称:" prop="roomName">
                  <Input type="text" v-model="hotelRoomDetailForm.roomName" clearable style="width: 500px"/>
                </Form-item>
                <Form-item label="房型说明:" prop="description">
                  <textarea type="text" v-model="hotelRoomDetailForm.description" clearable placeholder="请输入房型说明" style="border:1px solid #dddee1; width:500px;height:120px;resize:none;line-height:2.0"/>
                </Form-item>

                <Form-item label="门市价:" prop="sellprice">
                  <Input type="text" v-model="hotelRoomDetailForm.sellprice" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">元</span>
                </Form-item>
                <Form-item label="优惠价:" prop="price">
                  <Input type="text" v-model="hotelRoomDetailForm.price" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">元</span>
                </Form-item>
                <Form-item label="房间面积:" prop="roomarea">
                  <Input type="text" v-model="hotelRoomDetailForm.roomarea" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">㎡</span>
                </Form-item>
                <Form-item label="房间楼层:" prop="roomfloor">
                  <Input type="text" v-model="hotelRoomDetailForm.roomfloor" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">层</span>
                </Form-item>
                <Form-item label="房间数:" prop="number">
                  <Input type="text" v-model="hotelRoomDetailForm.number" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">间</span>
                </Form-item>
                <Form-item label="床型:" prop="roomstyle">
                  <RadioGroup v-model="hotelRoomDetailForm.roomstyle">
                    <Radio label="0">单床1.5米</Radio>
                    <Radio label="1">大床1.8米</Radio>
                    <Radio label="2">大床2米</Radio>
                    <Radio label="3">双床1.2米</Radio>
                    <Radio label="4">双床1.5米</Radio>
                    <Radio label="5">双床1.8米</Radio>
                    <Radio label="6">三床2米</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="窗户:">
                  <RadioGroup>
                    <Radio label="0">有窗</Radio>
                    <Radio label="1">内窗</Radio>
                    <Radio label="2">无窗</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="餐标:">
                  <RadioGroup>
                    <Radio label="0">单早</Radio>
                    <Radio label="1">双早</Radio>
                    <Radio label="2">早晚餐</Radio>
                    <Radio label="2">三餐</Radio>
                    <Radio label="2">一价全包</Radio>
                  </RadioGroup>
                </Form-item>
                <Form-item label="宽带:">
                  <RadioGroup>
                    <Radio label="0">有线</Radio>
                    <Radio label="1">WIFI</Radio>
                  </RadioGroup>
                </Form-item>

                <hr style="border-bottom:1px solid #dddee1; height:1px;">

                <Form-item label="预订送积分:" prop="pointBook" style="padding-top:16px;">
                  <Input type="text" v-model="hotelRoomDetailForm.pointBook" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">分</span>
                </Form-item>
                <Form-item label="积分抵现金:" prop="pointPrice">
                  <Input type="text" v-model="hotelRoomDetailForm.pointPrice" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">元</span>
                </Form-item>
                <Form-item label="评论送积分:" prop="pointComment">
                  <Input type="text" v-model="hotelRoomDetailForm.pointComment" clearable style="width: 120px"/>
                  <span style="display:inline-block;margin-left:6px;">分</span>
                </Form-item>
                <Form-item label="支付方式:" prop="payType">
                  <RadioGroup v-model="hotelRoomDetailForm.payType">
                    <Radio label="0">微信支付</Radio>
                    <Radio label="1">支付宝支付</Radio>
                    <Radio label="2">银行卡支付</Radio>
                    <Radio label="3">门店支付</Radio>
                  </RadioGroup>
                </Form-item>

                <hr style="border-bottom:1px solid #dddee1; height:1px;">

                <Form-item label="报价:" style="margin-top:20px;">
                  <template>
                    <Tabs value="name1" type="card" style="width:500px;">
                        <TabPane label="所有日期" name="name1">
                          <div style="display:inline-block;margin-top:20px;">
                            <span style="display: inline-block;width:80px;text-align:left;">日期范围:</span>
                            <Input type="text" clearable style="width: 120px;margin-right:10px;"/>
                            <span>~</span>
                            <Input type="text" clearable style="width: 120px;margin-left:10px;"/> 
                          </div>
                          <div style="display:inline-block;margin-top:20px;">
                            <span style="display: inline-block;width:80px;text-align:left;">价格:</span>
                            <span>成本</span>
                            <Input type="text" clearable style="width: 90px;margin-right:10px;"/>
                            <span>+利润</span>
                            <Input type="text" clearable style="width: 90px;margin-left:10px;margin-right:10px;"/> 
                            <span>售价：</span>
                          </div>
                          <div style="display:inline-block;margin-top:20px;">
                            <span style="display: inline-block;width:80px;text-align:left;">价格描述:</span>
                            <Input type="text" clearable style="width: 270px;margin-right:10px;"/>
                          </div>
                          <div style="display:inline-block;margin-top:20px;">
                            <span style="display: inline-block;width:80px;text-align:left;">库存:</span>
                            <Input type="text" clearable style="width: 170px;margin-right:10px;"/>
                            <span>-1表示不限</span>
                          </div>
                        </TabPane>
                        <TabPane label="按星期" name="name2">


                        </TabPane>
                        <TabPane label="按号数" name="name3">

                        
                        </TabPane>
                    </Tabs>
                </template>
                </Form-item>           
                
                <hr style="border-bottom:1px solid #dddee1; height:1px;">

              </TabPane>

              <TabPane label="图片">
                <template>
                  <div>
                    <!-- <div style="padding-top:20px;padding-left:20px;">封面图片</div>
                    <image-component 
                        ref="hotelLitpicComp"
                        @on-remove-success="hotelLitpicRemoveSuccess"
                        @on-add-success="hotelLitpicAddSuccess">
                      </image-component>

                    <hr style="border-bottom:1px solid #dddee1; height:1px;"> -->

                    <div style="padding-top:20px;padding-left:20px;">详情列表图片</div>
                    <image-component 
                        ref="hotelroomPiclistComp"
                        @on-remove-success="hotelPiclistRemoveSuccess"
                        @on-add-success="hotelPiclistAddSuccess">
                      </image-component>
                  </div>

                </template>
              </TabPane>


            </Tabs>
          </Form>
          <div style="padding:16px 0px;margin-left:2px;" class="operation">
            <Button @click="cancelSubmitHotelRoom" type="ghost" icon="android-arrow-back" style="width:120px;margin-right:10px;">返回主页</Button>
            <Button :loading="submitLoading" @click="submitHotelRoom" type="primary" :icon="hotelRoomButtonTypeIcon" style="width:120px;">{{hotelRoomButtonTypeText}}</Button>
          </div>
    </template>

  </div>
</template>

<script>
import dateFormatUtil from "@/utils/dateFormatUtil";
import TagModal from "./tagModal";
import ImageComponent from "./../comm-comp/imageComponent.vue";

export default {
  name: "hotel-room-detail",
  components: {
    TagModal,
    ImageComponent
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不得小于6位"));
      } else {
        callback();
      }
    };
    const validateMobile = (rule, value, callback) => {
      var reg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号格式错误"));
      } else {
        callback();
      }
    };

    return {
      submitLoading: false,
      modalTitle: "",

      hotelRoomButtonTypeText: "添加房型",
      hotelRoomButtonTypeIcon: "plus-round",

      currentHotel: '',

      hotelRoomDetailForm:{
        piclist:""
      },
      
      hotelRoomDetailFormValidate: {
        roomName: [
          { required: true, message: "酒店房型名称不能为空", trigger: "blur" },
          { max: 64, message: '酒店标题不能超过64个字符'}
        ]
      }

    };
  },
  methods: {
    resetFormByType: function(type,currentHotel,updateHotelRoom){
      console.log(updateHotelRoom);
      this.currentHotel = currentHotel;
      // this.currSelectedSupplier = "";
      if(0 === type){
        this.hotelRoomDetailModalType = 0;
        this.hotelRoomButtonTypeText = "添加房型";
        this.hotelRoomButtonTypeIcon = "plus-round";

        this.$refs.hotelroomPiclistComp.initByType("hotelroom",0,null);
      }else if(1 === type){
        this.hotelRoomDetailModalType = 1;
        this.hotelRoomButtonTypeText = "编辑房型";
        this.hotelRoomButtonTypeIcon = "edit";
        this.hotelRoomDetailForm = updateHotelRoom;

        this.$refs.hotelroomPiclistComp.initByType("hotel",1,updateHotelRoom.piclist);
      }else{}

      this.$refs.hotelRoomDetailForm.resetFields();
      for (let attr in this.hotelRoomDetailForm) {
        if (this.hotelRoomDetailForm[attr] == null) {
          this.hotelRoomDetailForm[attr] = "";
        }
      }


    },

    //hotelRoomdetail manage start
    
    submitHotelRoom(v) {
      this.$refs.hotelRoomDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          console.log(this.hotelRoomDetailForm);
          console.log(this.hotelRoomDetailModalType)
          if (this.hotelRoomDetailModalType === 1) {
            url = "/hotel/room/update";
            this.submitLoading = true;
            let updateHotelRoom = this.hotelRoomDetailForm;

            // if(updateHotelRoom.status) delete updateHotelRoom.status;
            updateHotelRoom.status = 0;
            updateHotelRoom.payType = 0;
            this.putRequest(url, updateHotelRoom).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");
                this.$emit('on-hotel-room-success',true);
                // this.hotelManagePageVisible = true;
                // this.hotelDetailPageVisible = false;
                // this.init();
              }
            });


          }else if(this.hotelRoomDetailModalType === 0){
            url = "/hotel/room/create";
            console.log("======/hotel/room/create======")
            this.submitLoading = true;
            let createHotelRoom = this.hotelRoomDetailForm;
            createHotelRoom.hotelId = this.currentHotel.id;
          //   createHotel.status = 0;
            if(createHotelRoom.id) delete createHotelRoom.id;
            this.postRequest(url, createHotelRoom).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("添加成功");
                this.$emit('on-hotel-room-success',true);
                // this.init();
              }
            });    
          }

        }
      });

    },


    cancelSubmitHotelRoom() {
      this.$emit('on-hotel-room-cancel',true);
      // this.hotelManagePageVisible = true;
      // this.hotelDetailPageVisible = false;
      // this.hotelRoomManagePageVisible = true;
      // this.hotelRoomDetailPageVisible = false;
    },
    //hotelRoomdetail manage end

    //picture methods start
    // hotelLitpicRemoveSuccess:function(res){
    //   if(res.flag){
    //     this.hotelDetailForm.litpic = res.pathStr;
    //   }
    // },
    // hotelLitpicAddSuccess:function(res){
    //   if(res.flag){
    //     this.hotelDetailForm.litpic = res.pathStr;
    //   }
    // },
    hotelPiclistRemoveSuccess:function(res){
      if(res.flag){
        this.hotelRoomDetailForm.piclist = res.pathStr;
      }
    },
    hotelPiclistAddSuccess:function(res){
      if(res.flag){
        this.hotelRoomDetailForm.piclist = res.pathStr;
      }
    },
     //picture methods end









    cancelSubmitHotel:function(){
      this.$emit('on-hotel-cancel',true);
    },
    submitHotel(v) {
      this.$refs.hotelDetailForm.validate(valid => {
        if (valid) {
          let url = "";
          if(this.hotelDetailForm.opentime){
            this.hotelDetailForm.opentime = dateFormatUtil.format(new Date(this.hotelDetailForm.opentime),"yyyy-MM-dd");
          }
          if(this.hotelDetailForm.decoratetime){
            this.hotelDetailForm.decoratetime = dateFormatUtil.format(new Date(this.hotelDetailForm.decoratetime),"yyyy-MM-dd");
          }
          console.log(this.hotelDetailForm);
          console.log(this.hotelDetailModalType)
          if (this.hotelDetailModalType === 1) {
            url = "/hotel/update";
            this.submitLoading = true;
            let updateHotel = this.hotelDetailForm;

            this.putRequest(url, updateHotel).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("更新操作成功");

                // this.hotelManagePageVisible = true;
                // this.hotelDetailPageVisible = false;
                
                // this.init();
                this.$emit('on-hotel-success',true);

              }
            });


          }else if(this.hotelDetailModalType === 0){
            url = "/hotel/create";
            this.submitLoading = true;
            let createHotel = this.hotelDetailForm;
            createHotel.status = 0;
            if(createHotel.id) delete createHotel.id;
            this.postRequest(url, createHotel).then(res => {
              this.submitLoading = false;
              if (res.success === true) {
                this.$Message.success("添加成功");

                // this.hotelManagePageVisible = true;
                // this.hotelDetailPageVisible = false;

                // this.init();
                this.$emit('on-hotel-success',true);
              }
            });    
          }

        }
      });

    },
    hotelDetailPropertySelect(){
      console.log("=============hotelDetailPropertySelect===========");
      this.modalTitle = "属性设置";
      this.hotelDetailPropetyModalVisible = true;
      
    },
    hotelDetailTagSelect(){
      // this.modalTitle = "图标设置";
      // this.hotelDetailTagModalVisible = true;
      //获取当前的图标 回显
      console.log("============main-selectedTagsArr=================");
      console.log(this.selectedTagsArr);
      this.$refs.tagModal.openReviewModal(this.selectedTagsArr);

    },
    tagCheckedBack(res){
      this.selectedTagsArr = res;
    },
    tagsCloseHandle(event, name){
      let closeTagId = name;
      var _this = this;
      let afterTagsArr = [];
      this.selectedTagsArr.forEach(function(eachItem){  
        if(eachItem.id == closeTagId){ //跳出循环
          return;
        }
        afterTagsArr.push(eachItem);
      });
      this.selectedTagsArr = afterTagsArr;
    },

    cancelHotelReview() {
      this.hotelReviewModalVisible = false;
    },
    submitHotelReview() {
      let url = "";
      url = "/hotel/review";
      let reviewHotel = {};
      reviewHotel.hotelId = this.hotelReviewForm.reviewHotelId;
      reviewHotel.status = this.hotelReviewForm.reviewStatus;
      console.log(reviewHotel);
      this.submitLoading = true;
      this.putRequest(url, reviewHotel).then(res => {
        this.submitLoading = false;
        if (res.success === true) {
          this.$Message.success("审核操作成功");
          this.init();
          this.hotelReviewModalVisible = false;
        }
      });

      // 暂未做验证
      // this.$refs.hotelReviewForm.validate(valid => {
      //   if (valid) {
      //   }
      // });
    }

  },
  mounted() {
    // this.init();
  }
};
</script>